<@user.user_html title="更新头像">


    <div class="clear"></div>
    <div class="swarp">
		<#include "/WEB-INF/content/include/user/app.ftl">
        <div class="srightwarp">
        	<div class="xwarp" style=" margin:0px; width:750px; overflow:hidden;">

                <form id="saveForm" name="saveForm" action="${base}/user/avatar/index!save" method="post">
                <div class="xbody sbody" style=" width:748px; margin:0px; padding:20px 0px;">
            		
                   
                    
                    <div class="module" style="width:680px; margin:0 auto; text-align:left; margin-bottom:15px;">
                       
                        <table class="module_tab xtab">
                           
                            <tr>
                                <td><span style="padding:5px; background-color:#fff000; color:#bb0000;">虚线框内为剪裁后目标</span></td>
                            </tr>
                            <tr>
                               
                                <td>
									<div style="width:100px;height:100px;overflow:hidden;margin:0 auto;padding:0;">
												<img src="${(sourcepath)!}" id="preview" />
									</div>
                                	<div id="pic">
                                		<img id="imgshow_1" src="${(sourcepath)!}"/>
                                	</div>
 

                                	 			<input type="hidden" id="x" name="labelX" />
												<input type="hidden"  id="y" name="labelY" />
												<input type="hidden"  id="w" name="width" />
												<input type="hidden"  id="h" name="height" />
                                	<input id="hidden_1" type="hidden" name="sourcepath" value="${(sourcepath)!}" />
                                </td>
                            </tr>
                        
                            
                        </table>

                    </div>
                   
                    
                     <div class="star_save"><input name="" type="submit" class="w" value="保 存"/></div>

            	</div>
				</form>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    
 	<script type="text/javascript" src="${statics}/plugins/Jcrop/js/jquery.Jcrop.min.js" ></script>
 	<link rel="stylesheet" href="${statics}/plugins/Jcrop/css/jquery.Jcrop.css" type="text/css" /> 
<script>
$(document).ready(function(){	
	
	function showCoords(coords)
	{
		jQuery('#x').val(coords.x);
		jQuery('#y').val(coords.y);
		jQuery('#w').val(coords.w);
		jQuery('#h').val(coords.h);
		if (parseInt(coords.w) > 0)
				{
					var rx = 100 / coords.w;
					var ry = 100 / coords.h;

					var picwidth= $("#imgshow_1").attr("width");
					var picheight= $("#imgshow_1").attr("height");
					jQuery('#preview').css({
						width: Math.round(rx * picwidth) + 'px',
						height: Math.round(ry * picheight) + 'px',
						marginLeft: '-' + Math.round(rx * coords.x) + 'px',
						marginTop: '-' + Math.round(ry * coords.y) + 'px'
					});
		}

	};
		var api = jQuery('#imgshow_1').Jcrop({
				onChange: showCoords,
				onSelect: showCoords,
				setSelect: [ 100, 100, 200, 200 ],
				allowResize:false,
				aspectRatio: 1
		});
});
</script>

</div>
</@user.user_html>


